<template>
  <div class="shopList">
    <!-- 添加 -->
    <el-button @click="addGoods" class="btnAdd" type="success" plain>添加商品</el-button>
    <!-- 表格 -->
    <el-table :data='shopList'>
        <el-table-column
         label="#"
         type="index"
        :index="indexMethod">
         </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
        <el-table-column label="创建时间">
          <template v-slot:default='{row}'>
             <p>{{row.add_time|time}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
           <template v-slot:default='{row}'>
                <el-button size="small" plain type="primary" icon="el-icon-edit"></el-button>
                <el-button size="small" plain type="danger" icon="el-icon-delete"></el-button>
           </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change='currentShop'
      @size-change='shopPag'
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total= 'total'>
    </el-pagination>
  </div>
</template>

<script>

export default {
  data () {
    return {
      shopList: [],
      pagenum: 1,
      pagesize: 5,
      total: 0
    }
  },
  created () {
    this.getShopList()
  },
  methods: {
    async getShopList () {
      const { data, meta } = await this.$axios.get('goods', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      // console.log(data)
      if (meta.status === 200) {
        this.shopList = data.goods
        this.total = data.total
      } else {
        console.log(meta.msg)
      }
    },
    // 页面条数改变触发
    shopPag (value) {
      this.pagesize = value
      this.getShopList()
    },
    currentShop (value) {
      this.pagenum = value
      this.getShopList()
    },
    indexMethod (index) {
      // 当前页数-1 * 每页的数据条数 + index + 1
      index = (this.pagenum - 1) * this.pagesize + index + 1
      return index
    },
    // 添加
    addGoods () {
      this.$router.push('goods-add')
    }

  }

}
</script>

<style lang='scss' scoped>
  .shopList{
    .btnAdd{
      margin-bottom: 15px;
    }
    .el-pagination{
      margin-top: 10px;
    }
  }
</style>
